<template>
  <main-page>
    <div slot="body">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="hover">
            <el-row :gutter="30">
              <el-col :span="12">
                <div class="item d-flex justify-content-between">
                  <div class="left">
                    <p>新增用户</p>
                    <span>{{userMap.new_count}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-xinzengyonghu new_user"></i>
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item d-flex justify-content-between">
                  <div class="left">
                    <p>活跃用户</p>
                    <span>{{userMap.active}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-huoyueyonghu active_user"></i>
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item d-flex justify-content-between mt-20">
                  <div class="left">
                    <p>累计用户</p>
                    <span>{{userMap.total_count}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-zongyonghushu total_user"></i>
                  </p>
                </div>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <el-row :gutter="30">
              <el-col :span="12">
                <div class="item d-flex justify-content-between">
                  <div class="left">
                    <p>新增订单</p>
                    <span>{{orderMap.new_order}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-xinzengdingdan new_user"></i>
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item d-flex justify-content-between">
                  <div class="left">
                    <p>订单金额</p>
                    <span>￥ {{orderMap.new_total_price}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-yejibaobiao-xinzengdingdanjine active_user"></i>
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item d-flex justify-content-between mt-20">
                  <div class="left">
                    <p>累计订单</p>
                    <span>{{orderMap.total_order}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-zongdingdanjiaoyishu total_order"></i>
                  </p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="item d-flex justify-content-between mt-20">
                  <div class="left">
                    <p>累计金额</p>
                    <span>￥ {{orderMap.total_price}}</span>
                  </div>
                  <p class="right">
                    <i class="iconfont icon-zongjine total_user"></i>
                  </p>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="margin-10" shadow="hover" :body-style="{ padding: '10px' }">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础统计" name="first">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="12">
                <el-card class="never" :body-style="{ padding: '10px' }">
                  <div slot="header" class="clearfix">
                    <span>最近10天新增用户数据</span>
                  </div>
                  <div id="new-user-line" class="line">最近10天新增用户数据</div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12">
                <el-card class="never" :body-style="{ padding: '10px' }">
                  <div slot="header" class="clearfix">
                    <span>最近10天活跃用户数据</span>
                  </div>
                  <div id="active-user-line" class="line">最近10天活跃用户数据</div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" class="margin-10">
                <el-card class="never" :body-style="{ padding: '10px' }">
                  <div slot="header" class="clearfix">
                    <span>最近10天新增订单数据</span>
                  </div>
                  <div id="new-order-line" class="line">最近10天新增订单数据</div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" class="margin-10">
                <el-card class="never" :body-style="{ padding: '10px' }">
                  <div slot="header" class="clearfix">
                    <span>最近10天新增充值金额数据</span>
                  </div>
                  <div id="add-money-line" class="line">最近10天新增充值金额数据</div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="访问统计" name="second">
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24" :md="12">
                <el-card class="never" :body-style="{ padding: '10px' }">
                  <div slot="header" class="clearfix">
                    <span>最近10天PV数据</span>
                  </div>
                  <div id="pv-line" class="line">最近10天PV数据</div>
                </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12">
                <el-card class="never" :body-style="{ padding: '10px' }">
                  <div slot="header" class="clearfix">
                    <span>最近10天UV数据</span>
                  </div>
                  <div id="uv-line" class="line">最近10天UV数据</div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </main-page>
</template>

<script>
import {
  summaryUser,
  summaryOrder,
  summaryLines,
  reportLine
} from "api/SummaryApi";

import axios from "axios";

// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

let option = {
  tooltip: {
    trigger: "axis"
  },
  grid: [
    {
      top: 25,
      width: "95%",
      bottom: "15%",
      left: 10,
      containLabel: true
    }
  ],
  xAxis: {
    type: "category",
    data: []
  },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value}"
    }
  },
  series: [
    {
      data: [],
      type: "line"
    }
  ]
};

export default {
  name: "SummaryIndex",
  data() {
    return {
      userMap: {},
      orderMap: {},
      activeName: "first"
    };
  },
  methods: {
    getSummaryAll() {
      axios.all([summaryUser(), summaryOrder()]).then(
        axios.spread((u, o) => {
          if (u) {
            this.userMap = u;
          }

          if (o) {
            this.orderMap = o;
          }
        })
      );
    },
    getSummaryLines() {
      summaryLines().then(res => {
        if (res) {
          //新增用户
          var newUserChart = echarts.init(
            document.getElementById("new-user-line")
          );
          option.xAxis.data = res.newUserLine.times.reverse();
          option.series[0].data = res.newUserLine.counts.reverse();
          newUserChart.setOption(option);

          //活跃用户
          var activeUserChart = echarts.init(
            document.getElementById("active-user-line")
          );
          option.xAxis.data = res.activeUserLine.times.reverse();
          option.series[0].data = res.activeUserLine.counts.reverse();
          activeUserChart.setOption(option);

          //新增订单
          var newOrderChart = echarts.init(
            document.getElementById("new-order-line")
          );
          option.xAxis.data = res.newOrderLine.times.reverse();
          option.series[0].data = res.newOrderLine.counts.reverse();
          newOrderChart.setOption(option);

          //支付金额
          var addMoneyChart = echarts.init(
            document.getElementById("add-money-line")
          );
          option.xAxis.data = res.newMoneyLine.times.reverse();
          option.series[0].data = res.newMoneyLine.money.reverse();
          addMoneyChart.setOption(option);
        }
      });
    },
    getReportLines() {
      reportLine().then(res => {
        if (res) {
        
          var pvLineChart = echarts.init(
            document.getElementById("pv-line")
          );
          option.xAxis.data = res.pvLine.times.reverse();
          option.series[0].data = res.pvLine.counts.reverse();
          pvLineChart.setOption(option);

          
          var uvLineChart = echarts.init(
            document.getElementById("uv-line")
          );
          option.xAxis.data = res.uvLine.times.reverse();
          option.series[0].data = res.uvLine.counts.reverse();
          uvLineChart.setOption(option);

          
        }
      });
    }
  },
  created() {
    this.getSummaryAll();
    this.getSummaryLines();
  },
  watch: {
    activeName(newActiveName) {
      if (newActiveName == "second") {
        this.getReportLines();
      } else if(newActiveName == 'first') {
        this.getSummaryLines()
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.iconfont {
  font-size: 32px !important;

  &.new_user {
    color: rgb(33, 150, 243);
  }

  &.active_user {
    color: rgb(255, 193, 7);
  }

  &.total_user {
    color: rgb(76, 175, 80);
    font-size: 36px !important;
  }

  &.total_order {
    color: rgb(244, 67, 54);
  }
}

.item {
  p {
    margin-bottom: 0px;
  }

  span {
    font-size: 22px;
  }

  &.mt-20 {
    margin-top: 20px;
  }
}

/ >>> .el-card__header {
  padding: 14px 10px;
  font-size: 14px;
}

.margin-10 {
  margin-top: 10px;
}

.line {
  min-height: 250px;
}
</style>